import Scrollbar from "./components/scrollbar";
import styles from "./App.module.less";

const App = () => {
  return (
    <>
      <Scrollbar width={400} height={400} scrollSize={10} scrollBarColor="#ccc">
        <div className={styles.contents}>
          <div>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias
            obcaecati at aperiam voluptatibus esse ex minus ab saepe voluptas.
            Consectetur dolorum amet quibusdam in culpa sint possimus nisi
            corporis eius.
          </div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consectetur exercitationem molestiae aut minus quibusdam architecto
            delectus quod inventore aspernatur, blanditiis, et ipsam laborum
            quas modi eos incidunt accusantium mollitia sint?
          </div>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
        </div>
      </Scrollbar>
      <br />
      <Scrollbar width={400} height={400} scrollSize={10} scrollBarColor="#ccc">
        <div className={styles.contents}>
          <div>211111111111111111111111111111111111111111111111111111111111111111111112</div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consectetur exercitationem molestiae aut minus quibusdam architecto
            delectus quod inventore aspernatur, blanditiis, et ipsam laborum
            quas modi eos incidunt accusantium mollitia sint?
          </div>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
        </div>
      </Scrollbar>
      <br />
      <Scrollbar width={400} height={400} scrollSize={10} scrollBarColor="#ccc">
        <div className={styles.contents}>
          <div>211111111111111111111111111111111111111111111111111111111111111111111112</div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consectetur exercitationem molestiae aut minus quibusdam architecto
            delectus quod inventore aspernatur, blanditiis, et ipsam laborum
            quas modi eos incidunt accusantium mollitia sint?
          </div>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consectetur exercitationem molestiae aut minus quibusdam architecto
            delectus quod inventore aspernatur, blanditiis, et ipsam laborum
            quas modi eos incidunt accusantium mollitia sint?
          </div>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque
            ipsam sapiente neque magni alias blanditiis illum enim deserunt
            consequatur sed sint voluptatum fuga nesciunt, laboriosam commodi
            vero, assumenda nulla. Quod.
          </p>
        </div>
      </Scrollbar>
    </>
  );
};

export default App;
